<template>
  <div class="page">
    <!-- <header class="home-header wrap" :class="{ active: headerScroll }"></header> -->
    <nav-bar />
    <van-image :src="bannerImg" fit="contain" class="banner" />
    <div class="category-list">
      <div v-for="(item, index) in categoryList" v-bind:key="index" @click="handleSkip(item.skipUrl)">
        <img :src="item.imgUrl" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="good">
      <header class="good-header" @click="goToNoticeBoard">公示栏<i class="nbicon nbmore icon-more"></i></header>
      <van-skeleton title :row="3" :loading="loading">
        <div class="good-box">
          <div v-for="(item, index) in noticeList" :key="index" class="good-item" @click="goToDetail(item.id)">
            <div class="good-desc">
              <div class="title">{{ item.applyName }}的建房公示</div>
              <div class="desc">建房类型：{{ item.buildTypeName }}</div>
            </div>
            <div class="good-num">
              <img :src="item.coverImg" />
              <span class="days" :class="item.isPublicEnd ? 'finish' : ''" :style="{ marginLeft: item.day < 10 ? '-7px' : '-15px' }">
                {{ item.isPublicEnd ? '完成' : item.day }}
              </span>
            </div>
          </div>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import navBar from '@/components/NavBar'
import { getNoticeList } from '@/service/home'
import bannerImg from '@/assets/Images/banner.png'
import applyListImg from '@/assets/Images/apply-list.png'
import buildApplyImg from '@/assets/Images/build-apply.png'
import completedApplyImg from '@/assets/Images/completed-apply.png'
import startApplyImg from '@/assets/Images/start-apply.png'
import noticeBlueImg from '@/assets/Images/notice_blue.png'
import noticeCyanImg from '@/assets/Images/notice_cyan.png'
import noticeGreenImg from '@/assets/Images/notice_green.png'
import { Toast } from 'vant'
export default {
  name: 'home',
  components: {
    navBar,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      bannerImg: bannerImg,
      noticeList: [],
      noticeImgs: [noticeBlueImg, noticeCyanImg, noticeGreenImg],
      categoryList: [
        { name: '建房申请', imgUrl: buildApplyImg, skipUrl: '/build-apply/apply-notes' },
        { name: '开工申请', imgUrl: startApplyImg, skipUrl: '/start-apply' },
        { name: '竣工申请', imgUrl: completedApplyImg, skipUrl: '/finish-apply' },
        { name: '申请记录', imgUrl: applyListImg, skipUrl: '/record-apply/record-list' },
      ],
      loading: false,
    })

    //获取公示列表
    state.loading = true
    getNoticeList({ pageNo: 1, pageSize: 5 }).then((res) => {
      state.noticeList = res.body.page.list || []
      state.noticeList.forEach((item, i) => {
        item.coverImg = state.noticeImgs[i % state.noticeImgs.length]
      })
      if (state.noticeList.length > 0) {
        state.loading = false
      }
    })
    onMounted(async () => {})

    const goToDetail = (id) => {
      router.push({ path: `/notice-board/detail/${id}` })
    }

    // 公示栏列表
    const goToNoticeBoard = () => {
      router.push({ path: `/notice-board` })
    }

    const handleSkip = (skipUrl) => {
      if (skipUrl) {
        router.push({ path: skipUrl })
      } else {
        Toast('敬请期待')
      }
    }

    return {
      ...toRefs(state),
      goToDetail,
      handleSkip,
      goToNoticeBoard,
    }
  },
}
</script>

<style lang="less" scoped >
@import '../common/style/mixin';
.page {
  padding-bottom: 100px;
  .home-header {
    position: fixed;
    left: 0;
    top: 0;
    .wh(100%, 50px);
    .fj();
    line-height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #fff;
    z-index: 10000;
  }
  .banner {
    width: 100%;
    height: 150px;
    margin-top: 15px;
    border-radius: 10px;
  }
  .category-list {
    .fj();
    width: 100%;
    padding-bottom: 13px;
    div {
      display: flex;
      flex-direction: column;
      width: 20%;
      text-align: center;
      img {
        .wh(34px, 31px);
        margin: 13px auto 8px auto;
      }
    }
  }
  .good {
    // padding-bottom: 100px;
    .icon-more {
      float: right;
      color: #bbbfc8;
    }
    .good-header {
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0 8px;
    }
    .good-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .good-item {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 12px;
        background-color: #ffffff;
        box-shadow: 0px 2px 5px 0px rgba(127, 139, 168, 0.12);
        .borderRadius(10px);
        .fj();
        margin-bottom: 12px;
        img {
          display: block;
          width: 67px;
          .borderRadius(50%);
        }
        .good-desc {
          font-size: 16px;
          padding: 10px 0;
          .title {
            width: 250px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .desc {
            font-size: 14px;
            color: #9297ae;
            margin-top: 8px;
          }
        }
        .good-num {
          position: relative;
          .days {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -15px;
            margin-top: -15px;
            font-size: 25px;
            font-weight: bold;
            color: #000000;
          }
          .finish {
            font-size: 13px;
            margin-left: -13px !important;
            margin-top: -11px;
          }
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid #e9e9e9;
        }
      }
    }
  }
}
</style>